<template>
  <div class='chart-container' :style='{ height: height, width: width }'>
    <a-spin :spinning='loading'>
      <!-- relative loading 占位 -->
      <div v-if='loading' :style="{ height : '100%', width : '100%' }"></div>
    </a-spin>
    <div v-if='!loading' :id='id' :class='className' :style="{ height : '100%', width : '100%'}" />
  </div>
</template>

<script>
import resize from './mixins/resize'

export default {
  mixins: [resize],
  components: {},
  props: {
    className: {
      type: String,
      default: 'bar-chart'
    },
    id: {
      type: String,
      default: 'bar-chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    xData: {
      type: Array,
      default() {
        return []
      }
    },
    legendList: {
      type: Array,
      default() {
        return []
      }
    },
    yData: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: '#3661b8'
    },
    unit: {
      type: String
    },
    dataZoomVisable: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    loading(val) {
      if (!val) {
        this.$nextTick(() => {
          this.initChart()
        })
      }
    }
  },
  computed: {
    option() {
      const _self = this
      return {
        color: [_self.color],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: function(params) {
            return '<div>' + params[0].marker + params[0].name + '<br>' + '最小值：' + '<span>' + params[0].value[1] + '</span>' + '<br>' + '最大值：' + '<span>' + params[0].value[2] + '</div>'
          }
        },
        legend: {
          type: 'scroll',
          data: _self.legendList
        },
        // dataZoom: [
        //   {
        //     show: _self.dataZoomVisable,
        //     realtime: true,
        //     start: 0,
        //     end: 50,
        //     xAxisIndex: [0, 2]
        //   }
        // ],
        grid: {
          top: _self.legendList ? '20%' : '5%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: _self.xData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: _self.unit ? '单位：' + _self.unit : '',
            type: 'value'
          }
        ],
        series: [{
          type: 'candlestick',
          barWidth: '60%',
          data: _self.yData
        }]
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  created() {
  },
  methods: {
    initChart() {
      const $el = document.getElementById(this.id)
      this.chart = this.$echarts.init($el, 'custom')
      const _self = this
      this.chart.setOption(_self.option)
      setTimeout(() => {
        this.resize()
      }, 600)
    }
  },
  mounted() {
  },
  updated() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }
}
</script>
<style lang='less' scoped>
@import "./char";
</style>
